<template>
    <div class="hc-calendar">
        <el-card class="box-card">
            <el-calendar>
                <template slot="dateCell" slot-scope="{date, data}">
                    <div @click="calendarClick(data.day)" class="hc-calendar-data">
                        <div class="hc-calendar-day">{{ data.day.split('-').slice(1).join('-') }}</div>
                        <div class="hc-calendar-content">
                            <div v-for="(preData,index) in listData" :key="index">
                                <div v-if="preData.day == data.day" v-html="preData.title">
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-calendar>
        </el-card>
    </div>
</template>

<script>
    import {clickEvent} from "../../../event/eventClick";

    export default {
        props: {
            listData: {
                type: Array,
                default: []
            },
            otherObj: {
                type: [Object, Function],
                default: () =>
                {
                    return {};
                },
            },
            event: {
                type: Object
            },
            title: {
                type: String
            }
        },
        name: "HCCalendarMonth",
        data()
        {
            return {}
        },
        created()
        {
            console.log(this.event, this.listData,  this.title, "==============cs");
        },
        mounted()
        {
            this.$nextTick(() =>
            {
                let dom_title = document.getElementsByClassName("el-calendar__title")[0];
                let div_title = document.createElement("div");
                div_title.className = "hc-custom-title";
                div_title.innerHTML = this.title;
                dom_title.after(div_title);
            });
        },
        methods: {
            calendarClick(day)
            {
                console.log(day);
                let selectedData = [];
                this.listData.map(preData =>
                {
                    if (preData.day == day)
                    {
                        selectedData.push(preData);
                    }
                });
                console.log(selectedData, "selectedData");
                clickEvent(this.event, selectedData, this.otherObj);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .hc-calendar {
        .el-calendar-day p {
            margin: 0;
        }

        .hc-calendar-data {
            height: 100%;
            width: 100%;
        }

        ::v-deep .el-calendar__body {
            padding: 0;

            /*::v-deep .el-calendar-table {
                thead {
                    height: 40px;

                    th {
                        color: #999;
                        font-weight: 700;
                    }
                }
            }*/
        }

        ::v-deep .el-calendar-table thead th {
            border-right: 1px solid #e9e9e9;
            background-color: #f5f5f5;
        }

        ::v-deep .el-calendar-table thead th:nth-child(1) {
            border-left: 1px solid #e9e9e9;
        }

        ::v-deep .el-calendar__header {
            align-items: center;
        }

        ::v-deep .el-calendar__title {
            width: 20%;
            text-align-last: left;
        }

        ::v-deep .el-calendar__button-group {
            width: 20%;
            text-align-last: right;
        }

        ::v-deep .hc-custom-title {
            font-size: 21px;
        }
    }

    .hc-calendar-content{}
</style>
